<template>
  <section class="add">
    <el-tag class="nav">添加用户</el-tag>
    <div class=" container">
      <form class="inp" @submit.prevent="addCustomer()">
        <h3>用户信息</h3>
        <div class="form-group">
          <label>姓名</label>
          <input type="text" class="form-control" placeholder="name" v-model="customer.name"/>
        </div>
        <div class="form-group">
          <label>电话</label>
          <input type="number" class="form-control" placeholder="phone" v-model="customer.phone"/>
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" class="form-control" placeholder="email" v-model="customer.email"/>
        </div>
        <div class="form-group">
          <label>学历</label>
          <input type="text" class="form-control" placeholder="education" v-model="customer.education"/>
        </div>
        <div class="form-group">
          <label>毕业院校</label>
          <input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool"/>
        </div>
        <div class="form-group">
          <label>职业</label>
          <input type="text" class="form-control" placeholder="profession" v-model="customer.profession"/>
        </div>
        <div class="form-group">
          <label>个人简介</label>
          <textarea rows="7" class="form-control" placeholder="profile" v-model="customer.profile"></textarea>
        </div>
        <button type="submit" class="btn btn-success form-control">添加</button>
      </form>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Add',
  data () {
    return {
      customer: {}
    }
  },
  methods: {
    addCustomer (e) {
      console.log(e)
      if (!this.customer.name && !this.customer.phone && !this.customer.email) {
        alert('请输入对应的信息')
      } else {
        let customer = {
          name: this.customer.name,
          phone: this.customer.phone,
          email: this.customer.email,
          education: this.customer.education,
          graduationschool: this.customer.graduationschool,
          profession: this.customer.profession,
          profile: this.customer.profile
        }
        console.log(customer)
        this.axios.post('/users', customer)
          .then((data) => {
            console.log(data)
            this.$router.push({ path: '/home', query: { alert: '添加用户信息成功!' } })
            this.customer.name = ''
            this.customer.phone = ''
            this.customer.email = ''
            this.customer.education = ''
            this.customer.graduationschool = ''
            this.customer.profession = ''
            this.customer.profile = ''
          })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .add
    margin-bottom 200px
    .nav
      margin-bottom 40px
      width 40%
      text-align center
    .inp
      padding 20px
      border 1px solid gainsboro
      box-sizing border-box
      width 100%
      h3
        font-size 32px
        margin-bottom 20px
      .form-group
        label
          margin-bottom: 15px
          font-weight: 500
          font-size 30px
        label:before
          content: '*';
          font-size: 20pt;
          color: red;
          position: relative;
          top: 20px;
        input
          font-size 30px
      button
        margin 30px 0
</style>
